<template>
  <div>
     <a-drawer
    :width="700"
    title="交付物详情"
    placement="right"
    :visible="visible"
    @close="onClose">
    <table class="custom-table" v-if="imgList.length > 0">
        <tr><td class="tr-title">交付物说明</td><td>{{content}}</td></tr>
        <tr><td class="tr-title">文件信息</td><td>
            <div v-for="(item,index) in imgList" :key="index" style="display: inline-block;margin:6px;width:108px;">
              <template v-if="item.type == 'pdf'">
                <img src="~@/assets/file_pdf.png" @click="priews(item.url)">
                <p class="filetext">{{item.fileName}}</p>
              </template>
              <template v-else-if="item.type == 'xlsx' || item.type == 'xls'">
                <img src="~@/assets/file_xlsx.png" @click="priews(item.url)">
                <p class="filetext">{{item.fileName}}</p>
              </template>
              <template v-else-if="item.type == 'docx' || item.type == 'doc'">
                <img src="~@/assets/file_doc.png" @click="priews(item.url)">
                <p class="filetext">{{item.fileName}}</p>
              </template>
              <template v-else>
                <viewer :images="imgList">
                <img :src="item.url" style="width:108px;height:133px;display: block;cursor: pointer;">
                <p class="filetext">{{item.fileName}}</p>
            </viewer>
              </template>
            </div>

        </td></tr>
    </table>
    <a-empty v-if="imgList.length === 0"/>
     <div class="footer" v-if="taskState === 5 && type === 2" :style="{ padding: '10px 16px',borderTop: '1px solid #e8e8e8',background: '#fff',position: 'fixed',bottom: 0,right: 0,width: '700px',textAlign: 'right'}">
        <a-button type="danger" @click="onError" :style="{ marginRight: '8px' }">不通过</a-button>
        <a-button type="primary" :style="{ marginRight: '10px' }" @click="onOK">通过</a-button>
    </div>
  </a-drawer>
  <a-drawer
        :visible="innerVisible"
        title="不通过理由"
        width="700"
        placement="left"
        :closable="false">
        <a-textarea v-model:value="remark" :rows="8" />
        <div class="footer" :style="{ padding: '10px 16px',borderTop: '1px solid #e8e8e8',background: '#fff',position: 'fixed',bottom: 0,left:0,width: '700px',textAlign: 'right'}">
            <a-button :style="{ marginRight: '8px' }" @click="innerVisible=false">取消</a-button>
            <a-button type="primary" :style="{ marginRight: '10px' }" @click="onInerOK">提交</a-button>
        </div>
    </a-drawer>
  </div>
</template>

<script>
import { 
    allGetTaskDeliverables,
    allApplyTaskDeliverables
} from '@/api/manage/sttle'
 import { 
  previewFile
} from '@/utils/util'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'taskInteraction',
  components: {
      DetailList,
      DetailListItem
  },
  data () {
    return {
       visible:false,
       innerVisible:false,
       content:'',
       importId:'',
       taskState:'',
       imgList:[],
       remark:'',
       type:''
    }
  },
  created () {
  },
  methods: {
    async add(item,type){
      this.type = type;
      this.importId = item.importId;
      this.taskState = item.operateStatus;
      this.imgList = [];
      const {code,data} = await allGetTaskDeliverables(item.importId);
      if(code === '1'){
        if(data && data != null){
          data.forEach(v => {
             if(v.type === 'TEXT'){
                this.content = v.content;
             }else{
                let poIndex= v.content.lastIndexOf("/");
								let filesName = v.content.substr(poIndex+1);
								let nameIdex= filesName.lastIndexOf(".");
								let fileName = filesName.substring(0,nameIdex);
								
								var urlIndex= v.content.lastIndexOf(".");
								var fileType = v.content.substr(urlIndex+1);
								
								let params = {};
								params.url = v.content;
								params.type = v.type;
								if(fileType == 'pdf' || fileType == 'xlsx'|| fileType == 'xls'|| fileType == 'docx'|| fileType == 'doc'){
									params.fileName = fileName;
								}else{
									params.fileName = '图片'
								}

                this.imgList.push(params)
             }
          });
          this.visible = true;
        }else{
          this.$message.error('没有交互物信息');
        }
      }
    },
    async onOK(){
        let params = {
            importId:this.importId,
            operateStatus:6
        }
        const {code} = await allApplyTaskDeliverables(params);
        if(code === '1'){
            this.$message.success('操作成功');
            this.visible = false;
            this.$emit("on-ok");
        }
    },
    async onError(){
      this.remark = '';
      this.innerVisible = true;
    },
     async onInerOK(){
      if(!this.remark){
          return this.$message.error('请填写理由！');
      }
      let params = {
          importId:this.importId,
          remark:this.remark,
          operateStatus:7
      }
      const {code} = await allApplyTaskDeliverables(params);
      if(code === '1'){
          this.$message.success('操作成功');
          this.innerVisible = false;
          this.visible = false;
          this.$emit("on-ok");
      }
    },
    priews(url){
      previewFile(url);
    },
    onClose(){
      this.visible = false;
    }
  }
}
</script>
<style>
  .filetext{
			font-size: 14px;
			height: 40px;
			word-break: break-all;
			  overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
</style>